﻿@{
    ViewBag.Title = "setauth";
    Layout = "~/Views/Shared/_Member.cshtml";
    RooHui.Infrastructure.Entities.Entity.Member member = ViewBag.Member;
}
@section head{
    <link rel="stylesheet" href="/content/css/memberStyle.css" />
    <link rel="stylesheet" href="/content/css/pages/page_reg.css" />
    <style type="text/css">
        .alerterror
        {
            color: rgb(185, 74, 72);
            background-color: rgb(242, 222, 222);
            border-color: rgb(238, 211, 215);
        }
    </style>
}
<div class="breadcrumbs margin-bottom-40">
    <div class="container">
        <h3 class="pull-left blue">
            实名认证</h3>
    </div>
</div>
<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3" style="height: 500px;">
            <div class="reg-page tab-pane active" style="padding: 5px 10px; background-color: #f7f7f7;"
                id="emailtype">
                <div class="reg-header">
                    <h2>
                        设置实名认证</h2>
                </div>
                <form id="setauthform" action="/member/setauth" enctype="multipart/form-data" method="post">
                <input type="file" style="display:none;" id="txtpage1" name="page1" onchange="fileisselected(this,'page1box')" />
                <input type="file" style="display:none;" id="txtpage2" name="page2" onchange="fileisselected(this,'page2box')" />
                <div id="mobilebox" class="row-fluid">
                    @if (!String.IsNullOrEmpty(ViewBag.Message))
                    {
                        <div class="alert alerterror">
                            @ViewBag.Message
                        </div> 
                    }
                    <div class="control-group">
                        <label class="control-label">
                            用户名：</label>
                        <div class="controls">
                            <input class="span12" id="txtusername" disabled="disabled" value="@member.UserName" 
                                name="username" type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            身份证号 <span class="color-red">*</span>：</label>
                        <div class="controls">
                            <input class="span12 {required:true,idcard:true}" id="txtCardId" name="CardId"
                                type="text" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            身份证号 <span class="color-red">*</span>：
                        <input type="button" id="btnupload" class="btn-u margin-bottom-10" 
                            href="#myModal" data-toggle="modal" value="上传身份证照" /></label>
                    </div>
                    <div class="control-group">
                        
                    </div>
                    <hr />
                    <button type="submit" id="btnsubmit" class="btn btn-primary span12 disabled" disabled="disabled" style="margin-left: 0">
                        确认</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">请上传身份证照</h3>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
        <div class="span6" id="page1box" style="text-align:center; height:200px;  border-right:1px solid #ccc;">
            <input type="button" class="btn-u" onclick="openfiledialog('txtpage1',this)" value="身份证正面" style="margin-top:80px;" />
        </div>
        <div class="span6" id="page2box" style="text-align:center; height:200px;">
            <input type="button" class="btn-u" onclick="openfiledialog('txtpage2',this)" value="身份证反面" style="margin-top:80px;" />
        </div>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    <button class="btn btn-primary disabled" id="btnfileconfirm" disabled="disabled">确定</button>
  </div>
</div>
@section scripts{
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/content/plugins/jquery-validate/jquery.metadata.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#setauthform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function openfiledialog(id, sender) {
            $('#' + id).trigger('click');
        }
        function fileisselected(sender, contianer) {
            var file = $(sender).val();
            file = file.replace(/\//g, '\\');
            if (file && file.length > 0) {
                var fileName = file.substring(file.lastIndexOf('\\') + 1);
                $('#' + contianer).children('div').remove();
                $('#' + contianer).append(
                    $('<div>已选择文件：' + fileName + '</div>')
                );
            }
            if ($('#txtpage1').val() != '' && $('#txtpage2').val() != '') {
                $('#btnfileconfirm').removeClass('disabled').removeAttr('disabled').click(function () {
                    $('#myModal').modal('hide');
                    $('#btnupload').siblings('b').remove();
                    $('#btnupload').after('<b style="color:green;">&nbsp;&nbsp;文件已选择</b>');
                });
                $('#btnsubmit').removeClass('disabled').removeAttr('disabled');
            }
        }
    </script>
}
